<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: grid; 
            width: 300px;
            height: 300px;
            border: 1px solid;
            grid-template-rows: repeat(3,1fr); 
            grid-template-columns: repeat(3,1fr);
          
            
        }
        .container div:first-child{
            background-color: red;
            background-clip: content-box;
            border: 1px solid;
            box-sizing: border-box;
            /*这里分为9个格子，所以 如果放在左上角，则 编号为 (1 1 2 2) 分别表示起始行标号1  ,起始列编号1, 结束行编号2,结束列编号2  */
            /* grid-row-start: 1;
            grid-column-start: 1;
            grid-row-end: 2;
            grid-column-end: 2; */

            /*如果放到中间*/
            /* grid-row-start: 2;
            grid-column-start: 2;
            grid-row-end: 3;
            grid-column-end: 3;  */

            /*如果占满第一行的后两列*/
            grid-row-start: 1;
            grid-column-start: 2;
            grid-row-end: 1;
            grid-column-end: 4; 
            
        }

    </style>
</head>
<body>
    <div class="container">
        <div>1</div> 
    </div>
   
</body>
</html>